<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Attendance check</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/icons.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <style>
    .teacher-add-pop {
        display: none;
        width: 280px;
        padding: 15px 20px;
        background-color: #FFFFFF;
        -webkit-box-shadow: 0px 0px 9px 0px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    0px 0px 9px 0px rgba(50, 50, 50, 0.75);
        box-shadow:         0px 0px 9px 0px rgba(50, 50, 50, 0.75);
    }
    .item {
        margin-bottom: 10px;
    }
    .shadow {
        display: none;
        width: 100%;
        min-height: 100%;
        background-color: rgba(0,0,0,0.5);
        overflow: hidden;
        position: fixed;
        top: 0px;
        left: 0px;
    }
    </style>
</head>
<body>
    <div class="wrapper wcol-12">
        <div class="header">
            <ul class="header__nav col-9">
                <li class="header__nav--active"><a href="#">Teachers</a></li>
                <li><a href="#" >Database</a></li>
                <li><a href="#" >Support</a></li>
            </ul>
            <ul class="header__nav--right">
                <li>
                    <a href="#">AccountName</a>
                    <!-- <ul class="header__nav--dropdown">
                        <li><a href="#">Account settings</a></li>
                        <li><a href="#">Log out</a></li>
                    </ul> -->
                </li>
                <li><a href="#">Log out</a></li>
            </ul>
        </div>
        <div class="content">
            <table class="content__list col-12">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Surname</th>
                        <th>Name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <div class="scrollable">
                    <tr data-col="11513">
                        <td id="id">11513</td>
                        <td>Zhaxalykov</td>
                        <td>Adilbek</td>
                        <td>adilbek.zhaxalykov@gmail.com</td>
                    </tr>
                    <tr data-col="11514">
                        <td id="id">11514</td>
                        <td>Nurgaziyev</td>
                        <td>Altynbek</td>
                        <td>altynbek.nurgaziyev@gmail.com</td>
                    </tr>
                    <tr>
                        <td id="id">11513</td>
                        <td>Zhaxalykov</td>
                        <td>Adilbek</td>
                        <td>adilbek.zhaxalykov@gmail.com</td>
                    </tr>
                    <tr>
                        <td id="id">11513</td>
                        <td>Zhaxalykov</td>
                        <td>Adilbek</td>
                        <td>adilbek.zhaxalykov@gmail.com</td>
                    </tr>
                    <tr>
                        <td id="id">11513</td>
                        <td>Zhaxalykov</td>
                        <td>Adilbek</td>
                        <td>adilbek.zhaxalykov@gmail.com</td>
                    </tr>
                    <tr>
                        <td id="id">11513</td>
                        <td>Zhaxalykov</td>
                        <td>Adilbek</td>
                        <td>adilbek.zhaxalykov@gmail.com</td>
                    </tr>
                    <tr>
                        <td id="id">11513</td>
                        <td>Zhaxalykov</td>
                        <td>Adilbek</td>
                        <td>adilbek.zhaxalykov@gmail.com</td>
                    </tr>
                    </div>
                </tbody>
            </table>
            <a href="#" class="btn-green" id="teacher-add"><i class="i-add73"></i>Add teacher</a>
            <a href="#" id="teacher-delete" class="btn-red">Delete teacher</a>
            <div class="shadow">
            <div class="teacher-add-pop">
                <div class="item">
                    <label for="id">ID</label>
                    <input type="text" name="id" class="input" id="id"/>
                </div>
                <div class="item">
                    <label for="name">Name</label>
                    <input type="text" name="name" class="input" id="name"/>
                </div>
                <div class="item">
                    <label for="surname">Surname</label>
                    <input type="text" name="surname" class="input" id="surname"/>
                </div>
                <div class="item">
                    <label for="email">Email</label>
                    <input type="email" name="name" class="input" id="email"/>
                </div>
                <div class="item">
                    <label> </label>
                    <input type="submit" class="btn-green" value="Add" style="width: 100px;"/>
                    <a href="" class="" id="teacher-pop-cancel">Cancel</a>
                </div>
            </div>
            </div>
        </div>
        <div class="footer"></div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $("table tbody tr").click(function() {
            var t = $(this);
            t.toggleClass("selected");
            t.siblings().removeClass("selected");
            $("#teacher-delete").attr("href", "http://localhost:8080/AttendanceChecker/teachers?delete=" + t.attr("data-col"));
        });

        $("#teacher-delete").click(function(ev) {
            ev.preventDefault();
            $(".selected").remove();
        })

        $("#teacher-add").click(function() {
            var pop = $(".teacher-add-pop");
            var popWidth = pop.width();
            var popHeight = pop.height();
            var width = $(window).width();
            var height = $(window).height();
            $(".shadow").css("display", "block");
            pop.css({
                "left": (width - popWidth) / 2,
                "top": (height - popHeight) / 5,
                "position": "fixed",
                "display": "block",
                "z-index": 1000
            });
        });

        $("#teacher-pop-cancel").click(function(ev) {
            ev.preventDefault();
            $(".teacher-add-pop").css("display", "none");
            $(".shadow").css("display", "none");
        });
    });
    </script>
</body>
</html>